<template>
  <!-- 
   :top="marginTop"
    -->
    <el-dialog  :model-value="visible" class="myDialogClass" :close-on-click-modal="false" :title="title"
      :width="width + 'px'" :height="height + 'px'" :top="marginTop" destroy-on-close :before-close="onClose"
      @open="open" :draggable="true" append-to-body>
      <!-- <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
        <el-button  @click="close">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
        </el-button>
      </div>
    </template> -->
      <!-- 
    :style="{ height: height + 'px' }"
     -->
      <div class="container">
        <slot name="content" />
      </div>
      <template #footer v-if="showFooter">
        <span class="dialog-footer">
          <el-button @click="onClose">取消</el-button>
          <el-button type="primary" @click="onConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>


</template>

<script setup lang='ts'>
const props = defineProps({
  title: {//弹框标题
    type: String,
    default: '标题'
  },
  visible: { //控制弹框的展示和影藏
    type: Boolean,
    default: true
  },
  width: {
    type: Number,
    default: 600
  },
  height: {
    type: Number,
    default: 250
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  marginTop: {
    type: String,
    default: '15vh'
  }
})
const emit = defineEmits(['onClose', 'onConfirm', 'open'])
const onClose = () => {
  emit('onClose')
}
const onConfirm = () => {
  emit('onConfirm')
}
const open = () => {
  emit('open')
}
</script>
<style></style>
